<template>
    <div>
        <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" @tab-remove="removeTab" @tab-click="handleClick">
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                <div>
                    <component :is="item.optContent" :prop="item.prop" :key="item.name"></component>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    props: ['comp'],
    data() {
        return {
            editableTabsValue: '',
            editableTabs: []
        }
    },
    watch: {
        comp(optionComponent) {
            console.log('发生了变化');
            if (this.editableTabs.find(item => item.name === optionComponent.name) === undefined) {
                this.editableTabs.push(optionComponent)
            }
            this.editableTabsValue = optionComponent.name
        }
    },
    methods: {
        removeTab(targetName) {
            const tabs = this.editableTabs.value
            let activeName = this.editableTabsValue.value
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        const nextTab = tabs[index + 1] || tabs[index - 1]
                        if (nextTab) {
                            activeName = nextTab.name
                        }
                    }
                })
            }
            this.editableTabsValue = activeName
            this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
        }
    },
    mounted() {
        console.log(this.comp);
        this.editableTabs.push(this.comp)
        this.editableTabsValue = this.comp.name
    }
}
</script>

<style>
/*.el-tabs__nav > .is-active {*/
/*    width: 150px;*/
/*}*/
/*.el-tabs__nav > .is-active::after{*/
/*    content: "";*/
/*    transition: 1s ease-in-out;*/
/*    position: absolute;*/
/*    width: 127px;*/
/*    height: 4px;*/
/*    top: 0px;*/
/*    border-bottom-right-radius: 10px;*/
/*    border-bottom-left-radius: 10px;*/
/*    background-color: #3475fe;*/
/*}*/
</style>